//for循环创建li ,追加图片标签
// 利用对象更改图片的位置
let cols = [
    {left:0,top:0},
    {left:325,top:0},
    {left:325*2,top:0},
    {left:325*3,top:0},
]
// 记录最后一张图片的位置，判断追加标签，实现无线滚动
let totalH = 0

function Waterfall(){

    for( let i = 1;i<=56;i++){
        let liObjs = document.createElement('li')
        liObjs.style.position = 'absolute'
        liObjs.innerHTML = `
        <span>
        <img src='../audios.img/${i}.jpg'>
        </span>
        <span>${i} 初秋絮语，用音乐记下你的点点滴滴</span>
        <span>
        <span class='iconfont icon-xihuan'></span>
        <span>${i}${i}.6w喜欢</span>
        </span>
        `
       
    
        
        document.querySelector('.waterfall .contain ul').appendChild(liObjs)
    
            // 监控图片加载，否则读取的offsetHeight不准确
            liObjs.querySelector('img').onload = function(){
            let minTop = 0
            cols.forEach((item,i)=>{
                if(cols[minTop].top>item.top){
                    console.log(666);
                    minTop = i
                }
            })
            liObjs.style.left = cols[minTop].left + 'px'
            liObjs.style.top = cols[minTop].top + 'px'
            //需要监控图片加载完毕，否则图片高度的读取有问题
            cols[minTop].top += liObjs.offsetHeight     
            totalH = cols[minTop].top
        }
    }
}
Waterfall()  //首次调用



// js无限滚动
// 监控总高度，判断总高度和滚动高度的大小，再次追加li标签到页面中
window.onscroll = function(){
    let clientHeight = window.innerHeight || document.documentElement.clientHeight
    let scrollH = document.body.scrollTop || document.documentElement.scrollTop
    if((clientHeight +scrollH)> totalH){
        Waterfall()
    }
}


// 点击播放video
let videoObj = document.querySelector('.audio .contain video')
let ulObj = document.querySelector('.waterfall .contain ul')
ulObj.onclick = function(evt){
    let e = evt || window.event
    let target = e.target || e.srcElement
    if(target.nodeName = 'LI'){
        videoObj.play()
    }
}